<template>
	<div class="main" ref="main">
		<div id="mapDiv" class="mapDiv" ref="mapDiv">
		</div>
		<template v-if="mapType">
			<MainTitle></MainTitle>
			<MainNavbar @onClickSearchMenuDetailItem="onClickSearchMenuDetailItem"
				:currentTabbarIndex="currentTabbarIndex" :width="drawerWidth"></MainNavbar>
			<MainTabbar v-model="currentTabbarIndex"></MainTabbar>
			<MainScreen :menuTypeArr="menuTypeArr" :menuTypeMoreArr="menuTypeMoreArr"
				:currentTabbarIndex="currentTabbarIndex" @onChange="onChangeScreen"
				@onChangeCheckbox="onChangeScreenCheckbox" @onClickCenter="panToMap"></MainScreen>
			<component :is="contentComponents[currentTabbarIndex]" @onClickEmer="onClickEmer"></component>
			<MainEventRemind></MainEventRemind>
			<img class="map-logo" src="../../assets/main/map_logo.png">
		</template>
		<template v-else>
			<newTitle></newTitle>
			<NewNavbar @onClickSearchMenuDetailItem="onClickSearchMenuDetailItem"
				:currentTabbarIndex="currentTabbarIndex" :width="drawerWidth" :TRTC="trtcCalling"></NewNavbar>
			<NewTabber v-model="currentTabbarIndex"></NewTabber>
			<NewScreen :menuTypeArr="menuTypeArr" :menuTypeMoreArr="menuTypeMoreArr"
				:currentTabbarIndex="currentTabbarIndex" @onChange="onChangeScreen"
				@onChangeCheckbox="onChangeScreenCheckbox" @onClickCenter="panToMap"></NewScreen>
			<component :is="newComponents[currentTabbarIndex]" @onClickEmer="onClickEmer" :search="searchType">
			</component>
			<NewEventRemind></NewEventRemind>
			<!-- <img src="../../assets/login/login_logo.png" class="logoImg" @click.stop="ceshi"> -->
			<img src="../../assets/login/login_logo.png" class="logoImg">

			<!-- 语音通话 -->
			<NewVoice v-model="voice" :trtcCalling="trtcCalling" ref="voice"></NewVoice>
			<NewInvite v-model="invite" :trtcCalling="trtcCalling" :voiceReceive="voiceReceive"></NewInvite>
		</template>
	</div>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import tMap from '../../utils/tMap'
	import bus from '@/utils/bus'
	import MainTitle from '@/components/product/main/layout/MainTitle';
	import MainNavbar from '@/components/product/main/layout/MainNavbar';
	import MainTabbar from '@/components/product/main/layout/MainTabbar';
	import MainScreen from '@/components/product/main/layout/MainScreen';
	import MainAllContent from '@/components/product/main/layout/MainAllContent';
	import MainCleanContent from '@/components/product/main/layout/MainCleanContent';
	import MainMachineContent from '@/components/product/main/layout/MainMachineContent';
	import MainGarbageContent from '@/components/product/main/layout/MainGarbageContent';
	import MainMonitoringContent from '@/components/product/main/layout/MainMonitoringContent';
	import MainGardenTreesContent from '@/components/product/main/layout/MainGardenTreesContent';
	import MainEmergencyContent from '@/components/product/main/layout/MainEmergencyContent';
	import MainEventRemind from '@/components/product/main/layout/MainEventRemind';
	import {
		isMapRotation
	} from '@/config/constantconfig'
	import NewTitle from '@/components/product/main/new/NewTitle'
	import NewTabber from '@/components/product/main/new/NewTabber'
	import NewNavbar from '@/components/product/main/new/NewNavbar'
	import NewScreen from '@/components/product/main/new/NewScreen';
	import NewAllContent from '@/components/product/main/subject/NewAllContent';
	import NewCleanContent from '@/components/product/main/subject/NewCleanContent';
	import NewMachineContent from '@/components/product/main/subject/NewMachineContent';
	import NewGarbageContent from '@/components/product/main/subject/NewGarbageContent';
	import NewMonitoringContent from '@/components/product/main/subject/NewMonitoringContent';
	import NewGardenTreesContent from '@/components/product/main/subject/NewGardenTreesContent';
	import NewEmergencyContent from '@/components/product/main/subject/NewEmergencyContent';
	import NewEventRemind from '@/components/product/main/subject/NewEventRemind';

	//语音通话
	// import tim from 'tim-js-sdk';
	// import TRTC from 'trtc-js-sdk';
	import NewVoice from '../../components/product/main/new/NewVoice.vue';
	import NewInvite from '../../components/product/main/new/NewInvite.vue';
	// import {
	// 	genTestUserSig
	// } from '../../../public/debug/GenerateTestUserSig.js'
	// import TRTCCalling from 'trtc-calling-js';

	export default {
		components: {
			MainTitle,
			MainNavbar,
			MainTabbar,
			MainScreen,
			MainAllContent,
			MainCleanContent,
			MainMachineContent,
			MainGarbageContent,
			MainMonitoringContent,
			MainGardenTreesContent,
			MainEmergencyContent,
			MainEventRemind,
			NewTitle,
			NewTabber,
			NewNavbar,
			NewScreen,
			NewAllContent,
			NewCleanContent,
			NewMachineContent,
			NewGarbageContent,
			NewMonitoringContent,
			NewGardenTreesContent,
			NewEmergencyContent,
			NewEventRemind,
			NewVoice,
			NewInvite
		},
		data() {
			return {
				mapType: false,
				searchType: false,

				// 所有图标的信息
				markerArr: [],
				guideposts: [],
				// 地图
				zoom: 0,
				map: '',
				mainRefreshTimer: null,
				// tabbar
				currentTabbarIndex: 0,
				// content
				contentComponents: [
					'MainAllContent',
					'MainCleanContent',
					'MainMachineContent',
					'MainGarbageContent',
					'MainMonitoringContent',
					'MainGardenTreesContent',
					'MainEmergencyContent',
				],
				newComponents: [
					'NewAllContent',
					'NewCleanContent',
					'NewMachineContent',
					'NewGarbageContent',
					'NewMonitoringContent',
					'NewGardenTreesContent',
					'NewEmergencyContent'
				],
				menuTypeArr: [
					['车辆', '人员', '设施', '案件', '更多'],
					['人员'],
					['车辆'],
					['车辆', '垃圾桶', '收集点'],
					['公厕', '中转站'],
					['园林绿化', '名木古树'],
					[]
				],
				menuTypeVisibleArr: [],
				// 图层控制数据
				menuTypeMoreArr: [{
						name: '车辆',
						list: ['在线', '离线', '排班']
					},
					{
						name: '人员',
						list: ['在线', '离线', '排班']
					},
					{
						name: '设施',
						list: ['公厕', '中转站', '收集点', '园林绿化', '名木古树', '窨井盖', '处理站']
					},
					{
						name: '案件',
						list: ['待分派', '待处理', '待结案'],
					},
				],
				isEnabledRefresh: true,
				currentOpenInfoWindowId: '',
				markerClusterer: null,
				markers: [],
				drawerWidth: 0,
				polygonArr: [], // 绘制应急网格
				gridDetaildrawGrid: null, // 园林绿化获取网格详情画的网格
				markerInfoWin: null,
				voice: false,
				invite: false,
				trtcCalling: null, //语音通话实例
				voiceReceive: null, //邀请通话信息
				ConOrHand: false,
				// 15秒无操作关闭弹窗
				lTime: new Date().getTime(), // 最后一次点击的时间
				cTime: new Date().getTime(), //当前时间
				timer: null,
				mapMarker: [],
				drawGridList: [],
				administrativeFencePoints: [], // 行政围栏
				grounpList:[]
			};
		},
		watch: {
			currentTabbarIndex(newVal, oldVal) {
				this.menuTypeVisibleArr = this.menuTypeArr[this.currentTabbarIndex]
				this.map.removeOverLay(this.administrativeFencePoints)
				this.filterMarker()
				this.mapPanToCenter()
				this.isEnabledRefresh = true
			}
		},
		computed: {
			...mapGetters({
				'mapCenterLnglat': 'getMapCenterLnglat',
				'mainRefreshTime': 'getMainRefreshTime',
			}),
		},
		mounted() {
			this.$store.state.statusType = true
			this.init();
		},
		destroyed() {
			// 清除定时刷新
			clearInterval(this.mainRefreshTimer)
			this.mainRefreshTimer = null
			bus.$off('hideMapInfoWindow')
			// this.voiceOff()//取消全局监听
		},
		methods: {
			init() {
				this.createMap()
				window.onClickPoptip = this.onClickPoptip
				window.onClickTrack = this.onClickTrack
				window.onClickPlayVideo = this.onClickPlayVideo
				this.drawerWidth = this.$refs.main.offsetWidth
				bus.$on('onMouseDownPage', data => {
					this.lTime = data
				})
				bus.$on('drawGrid', arr => {
					this.map.clearOverLays()
					this.markerClusterer.clearMarkers()
					this.isEnabledRefresh = false
					this.drawGridList = []
					arr.forEach(item => {
						this.drawGrid(item)
					})
				})
				bus.$on('drawGridClean', arr => {
					this.map.clearOverLays()
					this.markerClusterer.clearMarkers()
					this.isEnabledRefresh = false
					this.drawGridList = []
					arr.forEach(item => {
						this.drawGridClean(item)
					})
				})
				// bus.$on('searchType', arr => {
				//   this.searchType = arr
				// })
				bus.$on('drawGuidepost', arr => {
					// 清除地图点
					this.map.clearOverLays()
					// 清除点聚合
					this.markerClusterer.clearMarkers()
					// 停止定时刷新
					this.isEnabledRefresh = false
					if (!arr.length) return
					let points = []
					arr.forEach(item => {
						this.drawGuidepost(item)
						if (item.lnglat) {
							points = points.concat(JSON.parse(item.lnglat))
						}
					})
					let viewport = this.map.getViewport(points)
					if (arr.length > 1) {
						this.map.panTo(viewport.center, viewport.zoom + 1)
					} else {
						this.map.panTo(viewport.center, viewport.zoom - 1)
					}
				})
				bus.$on('redrawMarker', this.redrawMarker)
				bus.$on('emergencyPlanMarker', arr => {
					// 清除地图点
					this.map.clearOverLays()
					// 停止定时刷新
					this.isEnabledRefresh = false
					if (!arr.length) return
					arr.forEach(item => {
						if (item.grid != null) {
							this.drawPlanGrid(item.grid)
						}
						this.createMarker(item)
					});
				})
				bus.$on('emergencyPlanDetailedMarker', arr => {
					bus.$emit('emergencyPlanMarker', arr)
					this.openPoptip(arr[0], new T.LngLat(arr[0].lng, arr[0].lat))
					this.panToMap(arr[0])
				})
				// 垃圾清运，点击未清点位垃圾桶，显示气泡
				bus.$on('garbageNoCleanItem', data => {
					this.onClickSearchMenuDetailItem(data.id, data.typeName)
				})
				bus.$on('hideMapInfoWindow', () => {
					if (this.markerInfoWin) {
						this.markerInfoWin.closeInfoWindow()
					}
				})
				// this.$http.getVoiceIntercomGroup({}).then((res)=>{
				// 	console.log(res)
				// })
				// this.$http.getUserSig({}).then((res)=>{
				// 	// this.SetVocie(res.result)
				// })
			},
			// 初始化语音通话
			SetVocie(data) {
				let options = {
					SDKAppID: data.sdkAppid
				};
				this.trtcCalling = new TRTCCalling(options);
				// let res = genTestUserSig('321')
				this.trtcCalling.login({
					userID: data.userId,
					userSig: data.userSig,
				});
				//sdk_ready
				this.trtcCalling.on(TRTCCalling.EVENT.SDK_READY, (event) => {
					console.log(this.trtcCalling)
				});

				//通话错误
				this.trtcCalling.on(TRTCCalling.EVENT.ERROR, (error) => {
					console.log(error, '通话错误')
				});
				this.voiceHome()
				this.voiceUser()
			},
			//房主监听事件
			voiceHome() {
				//用户进房-g
				this.trtcCalling.on(TRTCCalling.EVENT.USER_ENTER, ({
					userID
				}) => {
					console.log(userID, '进房')
				});

				//用户退房
				this.trtcCalling.on(TRTCCalling.EVENT.USER_LEAVE, ({
					userID
				}) => {
					console.log(userID, '退房')
				});

				//本次通话结束-g
				this.trtcCalling.on(TRTCCalling.EVENT.CALL_END, (event) => {
					console.log(event, '通话结束')
					this.voiceUnlock()
				});

				//如果有用户接听，那么会收到此回调-f
				this.trtcCalling.on(TRTCCalling.EVENT.USER_ACCEPT, (event) => {
					console.log(event, 123)
				});

				//用户拒绝通话-f
				this.trtcCalling.on(TRTCCalling.EVENT.REJECT, ({
					userID
				}) => {
					console.log(userID, '拒绝通话') //只有发起端会收到
					this.$refs.voice.titleType = 5
					this.$refs.voice.voiceShow = true
					this.voiceUnlock()
				});

				//用户无应答
				this.trtcCalling.on(TRTCCalling.EVENT.NO_RESP, ({
					userID,
					userIDList
				}) => {
					console.log(userID, userIDList, '无应答')
				});

				//正在通话中-f
				this.trtcCalling.on(TRTCCalling.EVENT.LINE_BUSY, ({
					userID
				}) => {
					console.log(userID, '通话中')
					if (this.ConOrHand) { //当前为发起端，提示窗及解锁
						this.$refs.voice.titleType = 3
						this.$refs.voice.voiceShow = true
						this.voiceUnlock()
					}

				});
			},
			//用户监听事件
			voiceUser() {
				//收到邀请
				this.trtcCalling.on(TRTCCalling.EVENT.INVITED, ({
					sponsor,
					userIDList,
					isFromGroup,
					inviteData,
					inviteID
				}) => {
					this.invite = true
					this.$refs.voice.ConOrHand = true //客户端加锁，还需做判断，群聊时退房间的解锁
					console.log(sponsor, userIDList, isFromGroup, inviteData, inviteID, '收到邀请')
				});

				//通话被取消
				this.trtcCalling.on(TRTCCalling.EVENT.CALLING_CANCEL, (event) => {
					console.log(event, '通话被取消')
				});

				//超时无应答-g
				this.trtcCalling.on(TRTCCalling.EVENT.CALLING_TIMEOUT, (event) => {
					this.invite = false
					let time = setTimeout(() => {
						clearTimeout(time)
						if (this.ConOrHand) { //为发起端时弹窗
							this.$refs.voice.titleType = 1;
						} else { //为客户端时弹窗
							this.$refs.voice.titleType = 4;
						}
						this.voice = true
						this.$refs.voice.voiceShow = true
						this.voiceUnlock()
					}, 200)
					console.log(event, '超时无应答')
				});
			},
			voiceOff() {

			},
			//两端解锁
			voiceUnlock() {
				this.ConOrHand = false
				this.$refs.voice.ConOrHand = false
			},
			ceshi() {
				this.voice = true
			},
			// 创建地图
			createMap() {
				this.$Spin.show()
				tMap.init().then((T) => {
					this.$Spin.hide();
					this.zoom = 15
					// 最大只能放大到潍坊市
					this.map = new T.Map('mapDiv', {
						minZoom: 11,
					})
					// this.map = new T.Map('mapDiv')
					let lnglat
					// 地图中心点
					if (this.mapCenterLnglat) {
						let mapCenterLnglat = this.mapCenterLnglat.split(',')
						lnglat = new T.LngLat(mapCenterLnglat[0], mapCenterLnglat[1])
					} else {
						lnglat = new T.LngLat(119.130974, 36.706688)
					}
					this.map.centerAndZoom(lnglat, this.zoom)
					this.menuTypeVisibleArr = this.menuTypeArr[this.currentTabbarIndex]
					this.getMapMarkerList()
					this.createMarkerClusterer()
					this.map.addEventListener('zoomend', this.onChangeZoomend)
					// 定时刷新
					if (this.mainRefreshTime) {
						this.mainRefreshTimer = setInterval(() => {
							isMapRotation && this.isEnabledRefresh && this.getMapMarkerList()
						}, this.mainRefreshTime * 1000);
					}
				}).catch(err => {
					console.log(err);
					this.$Message.info('地图加载失败，请刷新浏览器')
				})
			},
			// 获取当前层级
			onChangeZoomend({
				type,
				target
			}) {
				let currentZoom = this.map.getZoom()
				if (currentZoom == 11) {
					this.getAdministrativeFence()
				}
			},
			// 获取行政围栏信息
			getAdministrativeFence() {
				this.$store.dispatch('getGridDetail', {
					gridType: 2
				}).then(res => {
					let config = {
						color: "#0079fe",
						weight: 3,
						opacity: 0.8,
						fillColor: "#0079fe",
						fillOpacity: 0.3
					}
					let points
					points = JSON.parse(res.points)
					let overlay = new T.Polygon(points, config)
					this.administrativeFencePoints = overlay
					this.map.addOverLay(overlay)
				})
			},
			// 地图回归中心点
			mapPanToCenter() {
				let lnglat
				if (this.mapCenterLnglat) {
					let mapCenterLnglat = this.mapCenterLnglat.split(',')
					lnglat = new T.LngLat(mapCenterLnglat[0], mapCenterLnglat[1])
				} else {
					lnglat = new T.LngLat(119.130974, 36.706688)
				}
				this.map.panTo(lnglat, this.zoom)
			},
			// 获取地图标记点列表
			getMapMarkerList() {
				this.$http.getMapMarkerList().then((res) => {
					if (res.code === 200) {
						let data = res.result;
						let caseMarkerArr = data.caselist.map(item => {
							item.type = '案件'
							item.marker = this.createMarker(item)
							return item
						})
						let list = data.list.map(item => {
							if (item.addr && item.addr.indexOf(',') !== -1) {
								item.lng = item.addr.split(',')[0]
								item.lat = item.addr.split(',')[1]
							} else {
								item.lng = ''
								item.lat = ''
							}
							item.marker = this.createMarker(item)
							return item
						})
						// 所有点的信息
						this.markerArr = [...caseMarkerArr, ...list]
						this.filterMarker()
						// 是否有信息窗口打开
						if (this.currentOpenInfoWindowId) {
							let obj = this.markerArr.find(item => item.id === this.currentOpenInfoWindowId)
							this.openPoptip(obj, new T.LngLat(obj.lng, obj.lat))
						}
					}
				})
			},
			// 创建点聚合
			createMarkerClusterer() {
				this.markerClusterer = new T.MarkerClusterer(this.map, {
					styles: [{
						url: require('../../assets/main/juhedian.png'),
						size: [34, 42], //图片大小
						offset: new T.Point(10, 20), //显示图片的偏移量
						textColor: '#fff', //显示数字的颜色
						textSize: 14, //显示文字的大小
						range: [0, 50],
					}, ]
				})
				// setGridSize setMaxZoom在styles不能设置，只能在外部设置
				this.markerClusterer.setGridSize(60) // 聚合的范围
				this.markerClusterer.setMaxZoom(14) // 缩放到多少的时候聚合
			},
			// 生成标记点
			createMarker(obj) {
				let icon = ''
				let lng = obj.lng
				let lat = obj.lat
				switch (obj.type) {
					case '案件':
						if (obj.isOverdue == 1) {
							icon = require('../../assets/main/marker_case_overdue.png')
						} else {
							icon = require('../../assets/main/marker_case_normal.png')
						}
						break;
					case '人员':
						if (parseInt(obj.move) === 0 && obj.onlinestatus === 0) {
							icon = require('../../assets/main/marker_person_move.gif')
						} else if (obj.onlinestatus === 0) {
							icon = require('../../assets/main/marker_person_on.png')
						} else {
							icon = require('../../assets/main/marker_person_off.png')
						}
						break;
					case '车辆':
						if (parseInt(obj.move) === 0 && obj.onlinestatus === 0) {
							icon = require('../../assets/main/marker_car_move.gif')
						} else if (obj.onlinestatus === 0) {
							icon = require('../../assets/main/marker_car_on.png')
						} else {
							icon = require('../../assets/main/marker_car_off.png')
						}
						break;
					case '公厕':
						icon = require('../../assets/main/marker_gongce.png')
						break;
					case '中转站':
						icon = require('../../assets/main/marker_zhongzhuanzhan.png')
						break;
					case '停车场':
						icon = require('../../assets/main/marker_tingchechang.png')
						break;
					case '园林绿化':
						icon = require('../../assets/main/marker_yuanlin.png')
						break;
					case '名木古树':
						icon = require('../../assets/main/marker_gushu.png')
						break;
					case '收集点':
						if (obj.typeitem === '垃圾桶') {
							icon = require('../../assets/main/marker_lajitong.png')
						} else {
							icon = require('../../assets/main/marker_shoujidian.png')
						}
						break;
					case '应急':
						icon = require('../../assets/main/guidepost.png')
						break;
					case '窨井盖':
						icon = require('../../assets/new/Manhole_cover.png')
						break;
					case '处理站':
						icon = require('../../assets/new/Processing_icon.png')
						break;
						return
				}
				//创建图片对象
				let iconObj = new T.Icon({
					iconUrl: icon,
					iconSize: new T.Point(33, 33),
					iconAnchor: new T.Point(10, 25)
				})
				let marker = new T.Marker(new T.LngLat(lng, lat), {
					icon: iconObj
				})
				if (obj.type == '应急') {
					this.map.addOverLay(marker)
				}
				// 给图标添加弹窗
				marker.addEventListener('click', (e) => {
					// 移动到图标位置
					this.panToMap(obj)
					setTimeout(() => {
						this.map.setZoom(18)
					}, 300);
					setTimeout(() => {
						this.panToMap(obj)
						// 打开气泡
						this.openPoptip(obj, new T.LngLat(obj.lng, obj.lat))
					}, 300);
					if (obj.type == '应急') {
						bus.$emit('openPlanDetail', obj)
					}
				})
				return marker
			},
			// 重绘地图标记点
			redrawMarker() {
				this.isEnabledRefresh = true
				this.filterMarker()
			},
			// 筛选地图标记点
			filterMarker() {
				// 清除所有点
				// this.markerClusterer.removeMarkers(this.mapMarker)
				this.markerClusterer.clearMarkers()
				this.map.clearOverLays()
				let markers = []
				// 所有图标信息
				this.markerArr.forEach(item => {
					// icon筛选
					let boo = this.menuTypeVisibleArr.some(items => {
						if (items === '设施') {
							return item.tbtype === '设施'
						} else if (items === '垃圾桶') {
							return item.typeitem === '垃圾桶'
						} else if (items === '收集点') {
							return item.type === '收集点' && item.typeitem !== '垃圾桶'
						} else {
							return items === item.type
						}
					})
					if (!boo) return
					// checkbox筛选
					let boo2 = false
					if (this.currentTabbarIndex === 0) {
						if (item.type === '案件') {
							boo2 = this.menuTypeMoreArr.find(items => items.name === '案件').list.some(itemss => {
								switch (itemss) {
									case '待分派':
										return item.status == 1
									case '待处理':
										return item.status == 2
									case '待结案':
										return item.status == 3
									case '已结案':
										return item.status == 4
									case '废弃工单':
										return item.status == 5
									default:
										break;
								}
							})
						} else if (item.type === '车辆') {
							boo2 = this.menuTypeMoreArr.find(items => items.name === '车辆').list.some(itemss => {
								switch (itemss) {
									case '在线':
										return item.onlinestatus === 0
									case '离线':
										return item.onlinestatus === 1
									case '排班':
										return item.shiftStatus === 0
									default:
										break;
								}
							})
						} else if (item.type === '人员') {
							boo2 = this.menuTypeMoreArr.find(items => items.name === '人员').list.some(itemss => {
								switch (itemss) {
									case '在线':
										// console.log('在线', item.onlinestatus === 0);
										return item.onlinestatus === 0
									case '离线':
										// console.log('离线', item.onlinestatus === 1);
										return item.onlinestatus === 1
									case '排班':
										// console.log('排班', item.shiftStatus === 0);
										return item.shiftStatus === 0
									default:
										break;
								}
							})
						} else if (item.type === '窨井盖') {
							boo2 = this.menuTypeMoreArr.find(items => items.name === '设施').list.some(itemss => {
								return itemss === item.type
							})
						} else if (item.type === '处理站') {
							boo2 = this.menuTypeMoreArr.find(items => items.name === '设施').list.some(itemss => {
								return itemss === item.type
							})
						} else if (item.tbtype === '设施') {
							boo2 = this.menuTypeMoreArr.find(items => items.name === '设施').list.some(itemss => {
								return itemss === item.type
							})
						} else {
							boo2 = true
						}
					} else {
						boo2 = true
					}
					if (boo && boo2) {
						// 人员且无设备的加载
						if (item.type == '人员') {
							// 道路保洁
							if (this.currentTabbarIndex == 1) {
								// 有排班
								if (item.shiftStatus == 0 && item.onlinestatus != 2) {
									markers.push(item.marker)
								}
							} else {
								if (item.onlinestatus != 2) {
									markers.push(item.marker)
								}
							}
						} else if (item.type == '车辆') {
							if (this.currentTabbarIndex == 2) {
								// jobType 2机械作业 3垃圾清运 4垃圾转运
								if (item.shiftStatus == 0 && item.onlinestatus != 2 && item.jobType == 2) {
									markers.push(item.marker)
								}
							} else if (this.currentTabbarIndex == 3) {
								if (item.shiftStatus == 0 && item.onlinestatus != 2 && item.jobType == 3) {
									markers.push(item.marker)
								}
							} else {
								if (item.onlinestatus != 2) {
									markers.push(item.marker)
								}
							}
						} else {
							markers.push(item.marker)
						}
					}
				})
				this.mapMarker = markers
				this.markerClusterer.addMarkers(this.mapMarker)
			},
			// 打开气泡
			async openPoptip(obj, lnglat) {
				this.polygonArr = []
				this.currentOpenInfoWindowId = obj.id
				if (!obj.address) {
					obj.address = await this.getAddress(lnglat)
				}
				let content = this.getContent(obj)
				this.markerInfoWin = new T.InfoWindow(content, {
					offset: new T.Point(7, -20),
					autoPan: true,
					closeButton: false,
					closeOnClick: true
				});
				this.markerInfoWin.addEventListener('open', this.windowOpen)
				// 关闭事件
				this.markerInfoWin.addEventListener('close', this.windowClose)
				this.map.openInfoWindow(this.markerInfoWin, lnglat)
				// 点击园林绿化显示园林绿化的网格
				if (obj.type == '园林绿化') {
					this.getGridDetaildrawGrid(obj.gridId)
				}
			},
			// 窗口打开触发
			windowOpen() {
				this.timer = setInterval(() => {
					this.cTime = new Date().getTime();
					if ((this.cTime - this.lTime) > 15000) {
						this.markerInfoWin.closeInfoWindow()
					}
				}, 1000);
			},
			// 窗口关闭触发
			windowClose() {
				clearInterval(this.timer)
				this.currentOpenInfoWindowId = ''
				if (this.currentTabbarIndex == 1) {
					this.polygonArr.forEach(item => {
						this.map.removeOverLay(item)
					})
				}
				if (this.gridDetaildrawGrid) {
					this.map.removeOverLay(this.gridDetaildrawGrid)
				}
			},
			// 逆地理编码
			async getAddress(lnglat) {
				const geocode = new T.Geocoder()
				return new Promise((resolve) => {
					geocode.getLocation(lnglat, (e) => {
						if (e.getStatus() === 0) {
							const addressComponent = e.getAddressComponent()
							resolve(addressComponent.address)
						} else {
							resolve(lnglat.lng + ',' + lnglat.lat)
						}
					})
				})
			},
			// 获取气泡content
			getContent(item) {
				let content = '';
				let {
					marker,
					...obj
				} = item
				let objJson = JSON.stringify(obj).replace(/\"/g, '&quot;')
				switch (obj.type) {
					case '案件':
						let status = '';
						switch (obj.status) {
							case 1:
								status = '待分派';
								break;
							case 2:
								status = '待处理';
								break;
							case 3:
								status = '待结案';
								break;
							case 4:
								status = '已结案';
								break;
							case 5:
								status = '废弃工单';
								break;
						}
						content = `
              <div class="poptip poptip-box" onClick="onClickPoptip(${objJson},'案件')">
                <div class="poptip-title">
                  <p class="event">
                    巡查上报-${status || '--'}
                  </p>
                  <span class="${obj.isOverdue == 1 ? 'alert' : ''}" } style="${obj.isOverdue == 1 ? '' : 'display:none'};">
                    逾期
                  </span>
                </div>
				<div class="poptip-line" style="margin:15px 0;"></div>
                <div class="poptip-cont" style="padding-left:0;">
                  <p>
                  <i class="iconfont icon-weizhishi"></i>
                    ${obj.address || '--'}
                  </p>
                </div>
              </div>
            `
						break;
					case '车辆':
						// <i style="color: #32b16c;" class="iconfont icon-sudujispeedometer29"></i>
						// <p>
						// <i style="color: #32b16c;" class="iconfont icon-xinxinicon"></i>
						// ${obj.engine == 1 ? '点火' : '熄火'}
						// </p>
						content = `
              <div class="poptip" style="padding-top:12px" onClick="onClickPoptip(${objJson},'车辆')">
                <div class="poptip-title">
                  <p>
                    <i style="color:#1890FF" class="iconfont icon-huanweiche"></i>
                    ${obj.name || '--'}
                  </p>
                  <span class="${obj.onlinestatus === 0 ? 'onLight' : 'off'}" }>
                    ${obj.onlinestatus === 0 ? '在线' : '离线'}
                  </span>
                </div>
                <div class="poptip-speed">
                  <p>
                    速度：
                    ${obj.speed || 0} km/h
                  </p>
                </div>
				<div class="poptip-line"></div>
                <div class="btn-box">
                  <a href="javascript:void(0)" class="item btn-box-blue" onclick="onClickTrack(event,${objJson})">
                    <span>轨迹</span>
                  </a>
                  <a href="javascript:void(0)" class="item btn-box-blue" onclick="onClickPlayVideo(event,${objJson})" style="${obj.videoonlinestatus != 2 && obj.videoonlinestatus != null ? '' : 'display:none'};cursor:${obj.videoonlinestatus == 0 ? 'pointer' : 'not-allowed'};color:${obj.videoonlinestatus == 0 ? '#eeeeee' : '#84919e'};">
                    <span>监控</span>
                  </a>
                </div>
              </div>
            `
						break;
					case '人员':
						content = `
              <div class="poptip" onClick="onClickPoptip(${objJson},'人员')">
                <span class="poptip-title poptip-bootom">
                  <p>
                    <i style="color:#1890FF" class="iconfont icon-huanweigong"></i>
                    ${obj.name || '--'}
                  </p>
                  <span class="${obj.onlinestatus === 0 ? 'onLight' : 'off'}" }>
                    ${obj.onlinestatus === 0 ? '在线' : '离线'}
                  </span>
                </span>
                <span class="poptip-title poptip-bootom">
                  <p>
                    <i class="iconfont icon-shouji"></i>
                    ${obj.phonenum || '--'}
                  </p>
				  <p>
				    <i class="iconfont icon-zuoyequyu"></i>
				    ${obj.typeitem || '--'}
				  </p>
                </span>
                <span class="poptip-bootom">
                  <p>
                    <i class="iconfont icon-weizhishi"></i>
                    ${obj.address || '--'}
                  </p>
                </span>
                <div class="btn-box">
                  <a href='javascript:void(0)' class="item btn-box-blue" onclick="onClickTrack(event,${objJson})">
                    <span>轨迹</span>
                  </a>
                  <a href="javascript:void(0)" class="item btn-box-blue" onclick="onClickPlayVideo(event,${objJson})" style="${obj.videoonlinestatus != 2 && obj.videoonlinestatus != null ? '' : 'display:none'};cursor:${obj.videoonlinestatus == 0 ? 'pointer' : 'not-allowed'};color:${obj.videoonlinestatus == 0 ? '#eeeeee' : '#84919e'};">
                    <span>监控</span>
                  </a>
                </div>
              </div>
            `
						break;
					case '公厕':
						content = `<div class="poptip" onClick="onClickPoptip(${objJson},'${obj.type}')">
						<div class="poptip-treename flex j-between">
							<div>
								<i style="color: #00BAFF;" class="iconfont icon-leixing_cesuo"></i>
								${obj.name || '--'}
							</div>
							<a href="javascript:void(0)" onclick="onClickPlayVideo(event,${objJson})" style="cursor:${obj.videoonlinestatus == 1 ? 'not-allowed' : 'pointer'}">
								<i style="color:${obj.videoonlinestatus == 0 ? '#5397E6' : '#666'};${obj.videoonlinestatus != 2 && obj.videoonlinestatus != null ? '' : 'display:none'}" class="iconfont icon-jiankong11"></i>
							</a>
						</div>
						<div class="poptip-title">
							<p>
								<i class="iconfont icon-biaoshi_renyuan"></i>
								负责人：${obj.principal || '--'}
							</p>
						</div>
						<div class="poptip-line"></div>
						<div>
							<span>状态：</span>
							<span>${obj.status || '--'}</span>
						</div>
						<div>
							<span>地址：</span>
							<span>${obj.addrdetail || '--'}</span>
						</div>
					</div>`
						break;
					case '中转站':
						content = `
                  <div class="poptip" style="padding-top:5px" onClick="onClickPoptip(${objJson},'${obj.type}')">
                    <div class="poptip-treename flex j-between">
                      <div>
                        <i style="color: #00BAFF;" class="iconfont icon-zhongzhuanzhan1"></i>
                        ${obj.name || '--'}
                      </div>
                      <a href="javascript:void(0)" onclick="onClickPlayVideo(event,${objJson})" style="cursor:${obj.videoonlinestatus == 1 ? 'not-allowed' : 'pointer'}">
                        <i style="color:${obj.videoonlinestatus == 0 ? '#5397E6' : '#666'};${obj.videoonlinestatus != 2 && obj.videoonlinestatus != 2 ? '' : 'display:none'}" class="iconfont icon-jiankong11"></i>
                      </a>
                    </div>
                    <div class="poptip-title">
                      <p>
                        <i class="iconfont icon-biaoshi_renyuan"></i>
                        负责人：${obj.principal || '--'}
                      </p>
                    </div>
					<div class="poptip-line"></div>
                    <div>
                        <span>状态：</span>
                        <span>${obj.status || '--'}</span>
                      </div>
                      <div>
                        <span>地址：</span>
                        <span>${obj.addrdetail || '--'}</span>
                      </div>
                  </div>
                `
						break;
					case '停车场':
						content = `
                  <div class="poptip" onClick="onClickPoptip(${objJson},'${obj.type}')">
                    <div class="poptip-treename">
                      <i style="color: #32b16c;" class="iconfont icon-leixing_tingchezhan"></i>
                      ${obj.name || '--'}
                    </div>
                    <div class="poptip-title">
                      <p>
                        <i class="iconfont icon-biaoshi_renyuan"></i>
                        负责人：${obj.principal || '--'}
                      </p>
                    </div>
                    <div>
                        <span>状态：</span>
                        <span>${obj.status || '--'}</span>
                      </div>
                      <div>
                        <span>地址：</span>
                        <span>${obj.addrdetail || '--'}</span>
                      </div>
                  </div>
                `
						break;
					case '园林绿化':
						content = `
                  <div class="poptip" onClick="onClickPoptip(${objJson},'${obj.type}')">
                    <div class="poptip-treename flex j-between">
                      <div>
						<i style="color: #00BAFF;" class="iconfont icon-yuanlinlvdi"></i>
						${obj.name || '--'}
					  </div>
					  <a href="javascript:void(0)" onclick="onClickPlayVideo(event,${objJson})" style="cursor:${obj.videoonlinestatus == 1 ? 'not-allowed' : 'pointer'}">
					    <i style="color:${obj.videoonlinestatus == 0 ? '#5397E6' : '#666'};${obj.videoonlinestatus != 2 && obj.videoonlinestatus != 2 ? '' : 'display:none'}" class="iconfont icon-jiankong11"></i>
					  </a>
                    </div>
                    <div class="poptip-title">
                      <p>
                        <i class="iconfont icon-biaoshi_renyuan"></i>
                        负责人：${obj.principal || '--'}
                      </p>
                    </div>
					<div class="poptip-line" style="margin: 8px 0"></div>
                    <div class="area-box">
                      <div style="border-right: 1px solid #3366FF">
                        <p style="margin-bottom:2px">绿化面积</p>
                        <span>${obj.greenarea || '--'}</span>
                      </div>
                      <div>
                        <p style="margin-bottom:2px">树木数量</p>
                        <span>${obj.treenum || '--'}</span>
                      </div>
                    </div>
                  </div>
                `
						break;
					case '名木古树':
						content = `
                  <div class="poptip" style="padding-top:5px" onClick="onClickPoptip(${objJson},'${obj.type}')">
                    <div class="poptip-treename">
                      <i style="color: #00BAFF;" class="iconfont icon-gushumingmu"></i>
                      ${obj.name || '--'}
                    </div>
                    <div class="poptip-title">
                      <p>
                        <i class="iconfont icon-biaoshi_renyuan"></i>
                        负责人：${obj.principal || '--'}
                      </p>
                    </div>
					<div class="poptip-line"></div>
                    <div class="area-box">
                      <div style="border-right: 1px solid #3366FF">
                        <p>年龄</p>
                        <span>${obj.age || '--'}</span>
                      </div>
                      <div>
                        <p>周长</p>
                        <span>${obj.breast || '--'}</span>
                      </div>
                    </div>
                  </div>
                `
						break;
					case '收集点':
						content = `
                  <div class="poptip" onClick="onClickPoptip(${objJson},'${obj.type}')">
                    <div class="poptip-treename">
                      <i style="color: #00A8E6;" class="iconfont icon-${obj.typeitem === '垃圾桶' ? 'leixing_lajitong' : 'biaoshi_shoujidian'}"></i>
                      ${obj.name || '--'}
                    </div>
                    <div class="poptip-title">
                      <p>
                        <i class="iconfont icon-biaoshi_renyuan"></i>
                        负责人：${obj.principal || '--'}
                      </p>
                    </div>
					<div class="poptip-line"></div>
                    <div>
                        <span>状态：</span>
                        <span>${obj.status || '--'}</span>
                      </div>
                      <div style="margin-top:5px">
                        <span>地址：</span>
                        <span>${obj.addrdetail || '--'}</span>
                      </div>
                  </div>
                `
						break;
					case '窨井盖':
						content = `<div class="poptip" onClick="onClickPoptip(${objJson},'${obj.type}')">
						<div class="poptip-treename flex j-between">
							<div class="flex" style="align-items:center;line-height:15px">
								<div class="Manhole"></div>
								${obj.name || '--'}
							</div>
							<a href="javascript:void(0)" onclick="onClickPlayVideo(event,${objJson})" style="cursor:${obj.videoonlinestatus == 1 ? 'not-allowed' : 'pointer'}">
								<i style="color:${obj.videoonlinestatus == 0 ? '#5397E6' : '#666'};${obj.videoonlinestatus != 2 && obj.videoonlinestatus != null ? '' : 'display:none'}" class="iconfont icon-jiankong11"></i>
							</a>
						</div>
						<div class="poptip-title">
							<p>
								<i class="iconfont icon-biaoshi_renyuan"></i>
								负责人：${obj.principal || '--'}
							</p>
						</div>
						<div class="poptip-line"></div>
						<div>
							<span>状态：</span>
							<span>${obj.status || '--'}</span>
						</div>
						<div>
							<span>地址：</span>
							<span>${obj.addrdetail || '--'}</span>
						</div>
					</div>`
						break;
					case '处理站':
						content = `<div class="poptip" onClick="onClickPoptip(${objJson},'${obj.type}')">
						<div class="poptip-treename flex j-between">
							<div class="flex" style="align-items:center;line-height:15px">
								<div class="Manhole Processing"></div>
								${obj.name || '--'}
							</div>
							<a href="javascript:void(0)" onclick="onClickPlayVideo(event,${objJson})" style="cursor:${obj.videoonlinestatus == 1 ? 'not-allowed' : 'pointer'}">
								<i style="color:${obj.videoonlinestatus == 0 ? '#5397E6' : '#666'};${obj.videoonlinestatus != 2 && obj.videoonlinestatus != null ? '' : 'display:none'}" class="iconfont icon-jiankong11"></i>
							</a>
						</div>
						<div class="poptip-title">
							<p>
								<i class="iconfont icon-biaoshi_renyuan"></i>
								负责人：${obj.principal || '--'}
							</p>
						</div>
						<div class="poptip-line"></div>
						<div>
							<span>状态：</span>
							<span>${obj.status || '--'}</span>
						</div>
						<div>
							<span>地址：</span>
							<span>${obj.addrdetail || '--'}</span>
						</div>
					</div>`
						break;
					case '应急':
						let color = '';
						switch (obj.level) {
							case '1级':
								color = '#ee6666';
								break;
							case '2级':
								color = '#73c0de';
								break;
							case '3级':
								color = '#fac858';
								break;
							case '4级':
								color = '#fc8452';
								break;
							case '5级':
								color = '#ea7ccc';
								break;
							case '6级':
								color = '#91cc75';
								break;
						}
						this.mapType ?
							content = `
                  <div class="poptip" >
                <div class="poptip-title">
                  <p class="event" style="font-size:17px">
                    ${obj.title}
                  </p>
                </div>
                <div class="poptip-cont-flex">
                  <div>
                  <p>预案等级${obj.level}</p>
                  <p style="color:${color}">${obj.time}</p>
                  </div>
                  <div class="plan-status" style="background:${color}">
                  ${obj.status}
                  </div>
                </div>
              </div>
                ` :
							content = `
                  <div class="poptip" >
                <div class="poptip-title">
                  <p class="event" style="font-size:17px">
                    ${obj.title}
                  </p>
                </div>
				<div class="poptip-line"></div>
                <div class="poptip-cont-flex">
                  <div>
                  <p>预案等级${obj.level}</p>
                  <p style="color:${color}">${obj.time}</p>
                  </div>
                  <div class="plan-type" style="background:${color}">
                  ${obj.status}
                  </div>
                </div>
              </div>
                `
						break;
				}
				return content;
			},
			// 点击气泡
			onClickPoptip(obj) {
				switch (obj.type) {
					case '案件':
						bus.$emit('showMainCaseDetail', {
							id: obj.caseId
						})
						break;
					case '车辆':
						bus.$emit('showMainSearchCarDetail', {
							id: obj.id,
							title: obj.name
						})
						break;
					case '人员':
						bus.$emit('showMainSearchPersonDetail', {
							id: obj.id,
							title: obj.name
						})
						break;
					case '公厕':
						bus.$emit('showMainSearchToiletDetail', {
							id: obj.id,
							title: obj.name
						})
						break;
					case '中转站':
						bus.$emit('showMainSearchTransferDetail', {
							id: obj.id,
							title: obj.name
						})
						break;
					case '停车场':
						// bus.$emit('showMainSearchTransferDetail', { id: obj.id, title: obj.name })
						break;
					case '园林绿化':
						bus.$emit('showMainSearchGardenDetail', {
							id: obj.id,
							title: obj.name
						})
						break;
					case '名木古树':
						bus.$emit('showMainSearchTreeDetail', {
							id: obj.id,
							title: obj.name
						})
						break;
					case '窨井盖':
						bus.$emit('showMainSearchManholeDetail', {
							id: obj.id,
							title: obj.name
						})
						break;
					case '处理站':
						bus.$emit('showMainSearchCollectDetail', {
							id: obj.id,
							title: obj.name
						})
						break;
					case '收集点':
						if (obj.typeitem === '垃圾桶') {
							bus.$emit('showMainSearchTrashDetail', {
								id: obj.id,
								title: obj.name
							})
						} else {
							bus.$emit('showMainSearchCollectDetail', {
								id: obj.id,
								title: obj.name
							})
						}
						break;
					case '网格':
						// this.gridVisible = true;
						bus.$emit('showMainSearchGridDetail', {
							id: obj.id,
							title: obj.name
						})
						break;
				};
			},
			// 点击跳转轨迹
			onClickTrack(e, obj) {
				e.stopPropagation()
				const {
					href
				} = this.$router.resolve({
					path: "/newTrack",
					query: {
						id: obj.id,
						type: obj.type === '人员' ? 'person' : 'car',
						name: obj.name,
						carType: obj.typeitem,
						time: Date.now()
					}
				})
				window.open(href, '_blank')
			},
			// 点击播放监控视频
			onClickPlayVideo(e, obj) {
				e.stopPropagation()
				if (obj.videoonlinestatus == 0) {
					bus.$emit('showPlayVideoModal', {
						equipcode: obj.equipcode,
						eqptype: obj.eqptype,
						details: obj.details
					})
				}
			},
			// 点击搜索详情item
			onClickSearchMenuDetailItem(id, type) {
				if (this.polygonArr.length != 0) {
					this.polygonArr.forEach(item => {
						this.map.removeOverLay(item)
					})
				}
				let obj = this.markerArr.find(item => item.id === id)
				if (obj && obj.lng && obj.lat) {
					// 移动到图标位置
					this.panToMap(obj)
					setTimeout(() => {
						this.map.setZoom(18)
					}, 300);
					setTimeout(() => {
						this.panToMap(obj)
						// 打开气泡
						this.openPoptip(obj, new T.LngLat(obj.lng, obj.lat))
					}, 300);
				} else {
					this.markerInfoWin.closeInfoWindow()
					this.$Message.info('暂无该' + type + '定位信息')
				}
				if (this.currentTabbarIndex == 1) {
					let params = {
						employeeId: id
					}
					this.$http.getMapPersonGrid(params).then((res) => {
						setTimeout(() => {
							res.result.forEach(item => {
								this.drawPlanGrid(item)
							})
						}, 500);
					})
				}
			},
			// 设置地图中心点
			panToMap(obj) {
				this.map.panTo(new T.LngLat(obj.lng, obj.lat))
			},
			// 修改图层筛选icon
			onChangeScreen(typeArr) {
				console.log(typeArr)
				this.menuTypeVisibleArr = typeArr
				this.filterMarker()
			},
			// 修改图层筛选checkbox
			onChangeScreenCheckbox(typeArr) {
				console.log(typeArr)
				this.filterMarker()
			},
			// 点击综合监管左下角应急计划
			onClickEmer() {
				this.currentTabbarIndex = 6
			},
			// 绘制网格
			drawGrid(item) {
				let isFinish = item.rptCarWork.tangciWorkByGrid && item.rptCarWork.tangciWorkByGrid === item.rptCarWork
					.tangCi
				let config = {
					color: isFinish ? '#0A9DFF' : '#FBAC13',
					weight: 3,
					opacity: 0.8,
					fillColor: isFinish ? '#0A9DFF' : '#FBAC13',
					fillOpacity: 0.3
				}
				let points
				let viewport
				switch (item.rptCarWork.areaType) {
					case 3: // 圆形
						points = new T.LngLat(item.rptCarWork.lng, item.rptCarWork.lat)
						this.map.addOverLay(new T.Circle(points, item.rptCarWork.radius, config))
						viewport = this.map.getViewport([points])
						this.map.panTo(viewport.center, viewport.zoom - 1)
						break;
					case 4: // 矩形
						points = JSON.parse(item.rptCarWork.lnglat)
						this.map.addOverLay(new T.Rectangle([points.Lq, points.kq], config))
						viewport = this.map.getViewport([points.Lq, points.kq])
						this.map.panTo(viewport.center, viewport.zoom - 1)
						break;
					case 5: // 多边形
						points = JSON.parse(item.rptCarWork.lnglat)
						this.map.addOverLay(new T.Polygon(points, config))
						viewport = this.map.getViewport(points)
						this.map.panTo(viewport.center, viewport.zoom - 1)
						break;
					case 6: // 线
						points = JSON.parse(item.rptCarWork.lnglat)
						this.map.addOverLay(new T.Polyline(points, config))
						viewport = this.map.getViewport(points)
						this.map.panTo(viewport.center, viewport.zoom - 1)
						break;
					default:
						break;
				}
				this.drawGridList.push(points)
			},
			// 绘制道路保洁网格
			drawGridClean(item) {
				let isFinish = item.grid.tangciWorkByGrid && item.grid.tangciWorkByGrid === item.grid
					.tangCi
				let config = {
					color: isFinish ? '#0A9DFF' : '#FBAC13',
					weight: 3,
					opacity: 0.8,
					fillColor: isFinish ? '#0A9DFF' : '#FBAC13',
					fillOpacity: 0.3
				}
				let points
				let viewport
				switch (item.grid.areaType) {
					case 3: // 圆形
						points = new T.LngLat(item.grid.lng, item.grid.lat)
						this.map.addOverLay(new T.Circle(points, item.grid.radius, config))
						viewport = this.map.getViewport([points])
						this.map.panTo(viewport.center, viewport.zoom - 1)
						break;
					case 4: // 矩形
						points = JSON.parse(item.grid.lnglat)
						this.map.addOverLay(new T.Rectangle([points.Lq, points.kq], config))
						viewport = this.map.getViewport([points.Lq, points.kq])
						this.map.panTo(viewport.center, viewport.zoom - 1)
						break;
					case 5: // 多边形
						points = JSON.parse(item.grid.lnglat)
						this.map.addOverLay(new T.Polygon(points, config))
						viewport = this.map.getViewport(points)
						this.map.panTo(viewport.center, viewport.zoom - 1)
						break;
					case 6: // 线
						points = JSON.parse(item.grid.lnglat)
						this.map.addOverLay(new T.Polyline(points, config))
						viewport = this.map.getViewport(points)
						this.map.panTo(viewport.center, viewport.zoom - 1)
						break;
					default:
						break;
				}
				this.drawGridList.push(points)
			},
			// 绘制路牌
			drawGuidepost(item) {
				let config = {
					color: '#0A9DFF',
					weight: 3,
					opacity: 0.8,
					fillColor: '#0A9DFF',
					fillOpacity: 0.3
				}
				if (item.lnglat) {
					let points = JSON.parse(item.lnglat)
					// 线
					let polyline = new T.Polyline(points, config)
					this.map.addOverLay(polyline)
					//创建图片对象
					let icon = new T.Icon({
						iconUrl: require('../../assets/main/guidepost.png'),
						iconSize: new T.Point(24, 32),
						iconAnchor: new T.Point(10, 30)
					})
					//向地图上添加自定义标注与label
					let minPoint = this.getLeftTopPoint(points)
					let lnglat = new T.LngLat(minPoint.lng, minPoint.lat)
					// 点
					let marker = new T.Marker(lnglat, {
						icon: icon
					})
					let content = `<div>[${item.levelName}]${item.gridName}</div>`
					// 标签
					let label = new T.Label({
						text: content,
						position: lnglat,
						offset: new T.Point(0, -40)
					})
					marker.addEventListener('click', e => {
						// 点击方法  点
						bus.$emit('onClickGuidepostItem', item)
					})
					label.addEventListener('click', e => {
						// 点击方法  标签
						bus.$emit('onClickGuidepostItem', item)
					})
					this.map.addOverLay(marker)
					this.map.addOverLay(label)
				}
			},
			// 绘制应急计划网格
			drawPlanGrid(item) {
				let config = {
					color: '#0A9DFF',
					weight: 3,
					opacity: 0.8,
					fillColor: '#0A9DFF',
					fillOpacity: 0.2
				}
				let points = []
				let polygon
				let lngLats = JSON.parse(item.lnglat)
				if (item.areaType == 3) {
					polygon = new T.Circle(new T.LngLat(item.lng, item.lat), item.radius, config)
				} else if (item.areaType == 4) {
					var bounds = new T.LngLatBounds(new T.LngLat(lngLats.Lq.lng, lngLats.Lq.lat), new T.LngLat(lngLats.kq
						.lng, lngLats.kq.lat));
					polygon = new T.Rectangle(bounds, config);
				} else {
					lngLats.forEach(items => {
						points.push(new T.LngLat(items.lng, items.lat));
					});
					polygon = item.areaType == 5 ? new T.Polygon(points, config) : new T.Polyline(points, config)
				}
				this.polygonArr.push(polygon)
				//向地图上添加网格
				this.map.addOverLay(polygon);
			},
			// 获取网格详情绘制网格
			getGridDetaildrawGrid(id) {
				let config = {
					color: '#0A9DFF',
					weight: 3,
					opacity: 0.8,
					fillColor: '#0A9DFF',
					fillOpacity: 0.2
				}
				this.$store.dispatch('getGridDetail', {
					gridId: id
				}).then(res => {
					let points
					this.gridDetaildrawGrid
					switch (res.drawType) {
						case 3:
							// 圆形
							points = new T.LngLat(res.lng, res.lat)
							this.gridDetaildrawGrid = new T.Circle(points, res.radius, config)
							this.map.addOverLay(this.gridDetaildrawGrid)
							break;
						case 4:
							// 矩形
							points = JSON.parse(res.points)
							this.gridDetaildrawGrid = new T.Rectangle([points.Lq, points.kq], config)
							this.map.addOverLay(this.gridDetaildrawGrid)
							break;
						case 5:
							// 多边形
							points = JSON.parse(res.points)
							this.gridDetaildrawGrid = new T.Polygon(points, config)
							this.map.addOverLay(this.gridDetaildrawGrid)
							break;
					}
				})
			},
			// 获取最小坐标点
			getLeftTopPoint(points) {
				let minPoint = {
					lng: points[0].lng,
					lat: points[0].lat
				}
				points.forEach(item => {
					if (item.lng < minPoint.lng || (item.lng == minPoint.lng && item.lat > minPoint.lat)) {
						minPoint = item;
					}
				})
				return minPoint;
			},
		},
	}
</script>

<style lang='scss' scoped>
	.main {
		width: 100%;
		height: 100%;

		.mapDiv {
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		.map-logo {
			z-index: 100;
			position: absolute;
			left: 10px;
			bottom: 30px;
		}
	}

	::v-deep {
		.tdt-infowindow {
			.tdt-infowindow-tip-container {
				display: none;

				.tdt-infowindow-tip {
					background: rgba(0, 0, 0, 0.85);
				}
			}

			.tdt-infowindow-content-wrapper {
				width: 252px;
				min-height: 173px;
				font-size: 13px;
				color: #eeeeee;
				font-weight: 500;
				background: url(../../assets/new/new_map_1.png) 0 0 no-repeat;
				background-size: 100% 100%;
				background-color: rgba(0, 0, 0, 0);
				box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
				cursor: pointer;

				.tdt-infowindow-content {
					width: inherit !important;
					padding: 25px 20px 0;
					margin: 0;

					.poptip-box {
						padding-top: 15px;
					}

					.poptip {
						.poptip-bootom {
							display: flex;
							margin-bottom: 4px;
						}

						.poptip-treename {
							margin-bottom: 8px;
						}

						.poptip-line {
							width: 200px;
							height: 1px;
							background-color: #3366FF;
							opacity: .55;
							margin: 10px 0;
						}

						.poptip-title {
							display: flex;
							justify-content: space-between;

							/* padding: 18px 0 0 10px; */
							.event {
								color: #fff;
							}

							span {
								margin-left: auto;
								padding: 2px 6px;
								border-radius: 10px;
								font-size: 12px;
							}

							.on {
								color: #32b16c;
								background: rgba(50, 177, 108, 0.2);
							}

							.onLight {
								color: #00BAFF;
								background: rgba(0, 186, 255, 0.2);
							}

							.off {
								color: #84919e;
								background: rgba(132, 145, 158, 0.2);
							}

							.task {
								color: #1890ff;
								background: rgba(24, 144, 255, 0.2);
							}

							.alert {
								color: #c30b19;
								background: rgba(195, 11, 25, 0.2);
							}
						}

						.poptip-cont {
							padding-left: 10px;
						}

						.poptip-cont-flex {
							display: flex;
							justify-content: space-between;
							align-content: center;
							color: #fff;
							font-size: 15px;
							padding-top: 10px;

							.plan-status {
								width: 60px;
								height: 60px;
								background-color: pink;
								text-align: center;
								line-height: 60px;
								border-radius: 50%;
							}

							.plan-type {
								height: 30px;
								color: #FFFFFF;
								line-height: 30px;
								border-radius: 6px;
								padding: 0 6px;
							}

							p {
								margin-bottom: 10px;
							}
						}

						.poptip-speed {
							margin-bottom: 10px;
							color: rgba(255, 255, 255, 0.6);
							font-size: 12px;
							color: #fff;
							display: flex;

							// justify-content: space-between;
							p {
								flex: 1;
							}
						}

						.btn-box {
							display: flex;
							justify-content: space-between;

							.item {
								flex: 1;
								background: rgba(255, 255, 255, 0.1);
								color: #eeeeee;
								border-radius: 4px;
								text-align: center;
								line-height: 32px;
								height: 32px;
								cursor: pointer;

								a {
									color: #fff;
								}
							}

							.btn-box-blue {
								background: rgba(0, 186, 255, 0.1);
							}

							.item:last-child {
								margin-left: 8px;
							}
						}

						.area-box {
							display: flex;
							margin-bottom: 6px;
							align-items: center;
							justify-content: center;

							div {
								display: flex;
								flex-direction: column;
								align-items: center;
								width: 49%;

								p {
									margin-bottom: 8px;
								}

								span {
									color: #eee;
									font-size: 16px;
								}
							}

							div:nth-of-type(1) {
								border-right: 1px solid rgba(255, 255, 255, 0.2);
							}
						}
					}

					p {
						margin: 0;
					}
				}
			}
		}
	}

	.logoImg {
		width: 148px;
		height: 34px;
		position: absolute;
		left: 10px;
		bottom: 30px;
		z-index: 999;
	}
</style>
